import React from 'react'
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'

import { Button, Form, Input, Select, Space } from 'antd'

const { Option } = Select

const areas = [
  { label: 'Beijing', value: 'Beijing' },
  { label: 'Shanghai', value: 'Shanghai' }
]

const sights = {
  Beijing: ['Tiananmen', 'Great Wall'],
  Shanghai: ['Oriental Pearl', 'The Bund']
}

type SightsKeys = keyof typeof sights

export default function Example01() {
  const [form] = Form.useForm()

  const onFinish = (values: any) => {
    console.log('Received values of form:', values)
  }

  const handleChange = () => {
    form.setFieldsValue({ sights: [] })
  }
  return (
    <Form
      form={form}
      name='assistLineConfig'
      onFinish={onFinish}
      autoComplete='off'
    >
      <Form.Item
        name='area'
        label='Area'
        rules={[{ required: true, message: 'Missing area' }]}
      >
        <Select options={areas} onChange={handleChange} />
      </Form.Item>
      <Form.List name='sights'>
        {(fields, { add, remove }) => {
          return (
            <>
              {fields.map((field) => (
                <Space key={field.key} align='baseline'>
                  <Form.Item
                    noStyle
                    shouldUpdate={(prevValues, curValues) =>
                      prevValues.area !== curValues.area ||
                      prevValues.sights !== curValues.sights
                    }
                  >
                    {() => (
                      <Form.Item
                        {...field}
                        label='Sight'
                        name={[field.name, 'sight']}
                        rules={[{ required: true, message: 'Missing sight' }]}
                      >
                        <Select
                          disabled={!form.getFieldValue('area')}
                          style={{ width: 130 }}
                        >
                          {(
                            sights[form.getFieldValue('area') as SightsKeys] ||
                            []
                          ).map((item) => (
                            <Option key={item} value={item}>
                              {item}
                            </Option>
                          ))}
                        </Select>
                      </Form.Item>
                    )}
                  </Form.Item>
                  <Form.Item
                    {...field}
                    label='Price'
                    name={[field.name, 'price']}
                    rules={[{ required: true, message: 'Missing price' }]}
                  >
                    <Input />
                  </Form.Item>

                  <MinusCircleOutlined onClick={() => remove(field.name)} />
                </Space>
              ))}

              <Form.Item>
                <Button
                  type='dashed'
                  onClick={() => add()}
                  block
                  icon={<PlusOutlined />}
                >
                  Add sights
                </Button>
              </Form.Item>
            </>
          )
        }}
      </Form.List>
      <Form.Item>
        <Button type='primary' htmlType='submit'>
          Submit
        </Button>
      </Form.Item>
    </Form>
  )
}
